<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>创建节点 - Zookeeper Viewer</title>
    <link rel="stylesheet" href="/webjars/bootstrap/5.1.3/css/bootstrap.min.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            padding-top: 20px;
        }
        .form-container {
            max-width: 600px;
            margin: 0 auto;
        }
        .form-group {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
<div class="container">
    <header class="mb-5">
        <h1 class="text-center">创建Zookeeper节点</h1>
    </header>

    <!-- 消息提示区域 -->
    <div th:if="${successMessage}" class="alert alert-success" role="alert">
        <span th:text="${successMessage}"></span>
    </div>
    <div th:if="${errorMessage}" class="alert alert-danger" role="alert">
        <span th:text="${errorMessage}"></span>
    </div>

    <div class="form-container">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">节点信息</h3>
            </div>
            <div class="card-body">
                <form th:action="@{/create}" method="post">
                    <input type="hidden" th:name="parentPath" th:value="${parentPath}">
                    
                    <div class="form-group">
                        <label for="parentPathDisplay">父节点路径</label>
                        <input type="text" id="parentPathDisplay" class="form-control" th:value="${parentPath}" disabled>
                    </div>
                    
                    <div class="form-group">
                        <label for="nodeName">节点名称 <span class="text-danger">*</span></label>
                        <input type="text" id="nodeName" name="nodeName" class="form-control" placeholder="请输入节点名称" required>
                        <small class="form-text text-muted">请输入节点名称，不要包含路径分隔符(/)。</small>
                    </div>
                    
                    <div class="form-group">
                        <label for="nodeData">节点数据</label>
                        <textarea id="nodeData" name="nodeData" class="form-control" rows="5" placeholder="请输入节点数据（可选）"></textarea>
                    </div>
                    
                    <div class="form-group form-check">
                        <input type="checkbox" id="ephemeral" name="ephemeral" class="form-check-input">
                        <label for="ephemeral" class="form-check-label">临时节点</label>
                        <small class="form-text text-muted">临时节点会在会话结束后自动删除。</small>
                    </div>
                    
                    <div class="text-center mt-4">
                        <button type="submit" class="btn btn-success btn-lg">创建节点</button>
                        <a th:href="@{/view(path=${parentPath})}" class="btn btn-secondary btn-lg ml-2">取消</a>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <footer class="mt-8 text-center text-muted">
        <p>Zookeeper Viewer &copy; 2023</p>
    </footer>
</div>

<script src="/webjars/jquery/3.6.0/jquery.min.js"></script>
<script src="/webjars/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>